$(document).ready(function(){
    //variables
    uniqueid = 1;zindex = 0;text_id = 1;
    $.post("/ajax/viewDiagram",{action:"getActiveUniqueID"},function(data){
        uniqueid = data;
    })
    //load active diagram
    $.post("/ajax/viewDiagram",{action:"viewActiveDiagram"},function(data){
        $(".flow_contents").html(data);
        moveObjects();
        $(".connector").draggable({containment:'.flow_content'},{revert: "valid"});
    })
    //for resizing the form container/holder
    $(".flow_content").resizable({
        handles: 's',
        stop: function(event, ui) {
            $(this).css("width", '');
       }
    });
    //for sliding the symbol area/div
    $("#slide_sym").live("click",function(){
        $(".head").slideToggle()
        if(a%2){
            $(".slides_image").html('<img src="images/down_arrow.png" height=20 width=20/>')
            $(".f_title").attr("title","Slide Up")
            //alert("down_arrow")
        }else{
            //alert("right_arrow")
            $(".f_title").attr("title","Slide Down")
            $(".slides_image").html('<img src="images/right_arrow.png" height=20 width=20/>')
        }
        a++;
    })
    $(".diagram_rows").live("click",function(){
        diagram_id = this.id;
        $.post("/ajax/viewDiagram",{diagram_id:diagram_id,action:"getNextUniqueID"},function(data){
            uniqueid = data;
        })
    })
    $("#cancelDiagram").live("click",function(){
        $.post("/ajax/viewDiagram",{action:"getActiveUniqueID"},function(data){
            uniqueid = data;
        })
    })
    //for workflow
    $(".edit_forms").live("click",function(){
       $.post("/ajax/updateForm",{action:"getWorkflowUniqueID",form_id:this.id},function(data){
           workflow_unique_id = data;
        })
    })
    //for appending the shapes in the .flow_content div
    workflow_unique_id = 2;
    $(".shapes").live("click",function(){
        diagramType = $(this).attr("rel");
        if(diagramType=="workflow"){
            value = $(".approverWorkflow :selected").text()
            status = $(".approverWorkflowStatus :selected").text();
            approverTypeWorkflow = $(".approverTypeWorkflow :selected").val();
            change = 1;
            node_id = "";
            $(".activeObj").each(function(){
                if($(this).attr("node-type")=="approver"){
                    change = 0;
                    node_id = $(this).attr("id");
                }
            })
            buttonApproverError=0;
            buttonID = "";
            buttonProperties = "";
            buttonCtr = 0;
            if(change==1){
                $(".buttonApprover").each(function(){
                    buttonID = this.id.substr(15,this.id.length);
                    if($(this).val()==0 || $(".requestStatus_"+buttonID).val()==""){
                        
                    }else{
                        requestStatus = $(".requestStatus_"+buttonID).val();
                        nextApprover = $("."+this.id+" :selected").val();
                        buttonProperties+=buttonID+":"+nextApprover+">"+requestStatus+"+";
                        buttonApproverError++
                    }
                    buttonCtr++;
                })
                if($(".approverWorkflow :selected").val()!=0 && $(".approverWorkflowStatus :selected").val()!=0){
                    if(buttonCtr>0){
                        if(buttonApproverError>0){
                            $(".flow_content").append('<span class="appendShapes workflowObjects  appendObjects newObj" style="" diagram-type="workflow" node-type="approver" approver-type="'+approverTypeWorkflow+'" id="flowspan_'+workflow_unique_id+'_'+this.id+'" title="111" button-status="'+buttonProperties+'">'+
                                        '<span id="spanText_'+workflow_unique_id+'" class="textHandle" style="font-size: 10px;cursor:pointer;position: absolute;margin: 5px;width: 60px;text-align: center;">'+value+'</span><br />'+
                                        '<span id="spanStatus_'+workflow_unique_id+'" class="textHandle" style="font-size: 10px;cursor:pointer;position: absolute;margin: 5px;min-width: 82px;text-align: center;color: transparent">'+status+'</span>'+
                                          '<span id="flow_'+workflow_unique_id+'_'+this.id+'" rel="'+$(this).attr("rel")+'" class="fl_shapes "></span>'+
                                          '<span style="position:absolute" class="shapeSideButton_holder ">'+
                                              '<span style="" class="right  connector"  id="right_'+workflow_unique_id+"_"+this.id+'"></span>'+
                                          '</span>'+
                                        '</span>');
                            fire_onBeforeOnload(2)
                            //workflow
                            /*$(".workflowObjects").tooltip({
                                content: function(callback){
                                    $.post("/ajax/actionAdmin",{"action":"getTooltipWorkflow",approver:value,approverStatus:status,buttons:buttonProperties},function(data){
                                        callback(data);
                                    })
                                },
                                position: {
                                    my: "left+15 center", at: "right center"
                                },
                                open: function( event, ui ) {
                                    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
                                }
                            })*/
                            //remove all the borders
                            $(".appendShapes").each(function(){
                                $("#"+this.id).css("border","1px solid rgb(194, 194, 194)")
                            })
                            //return to the default stage
                            $(".appendButtonsToUse").html(null);
                            $.post("/ajax/actionAdmin",{action:"getButtons"},function(data){
                                $(".approverButtons").html(data)
                            })
                            //$(".approverWorkflow :selected").html()
                            //$(".approverWorkflowStatus :selected").text();
                            $(".approverTypeWorkflow").find("option[value='0']").attr("selected",true);
                            $(".approverWorkflow :selected").html('<option value="0">--Select Processor Type--</option>')
                            $(".approverWorkflowStatus option").each(function(){
                                if($(this).val()==0){
                                    $(this).attr("selected","selected")
                                }else{
                                    $(this).attr("selected",false)
                                }
                            })
                        }else{
                            showNotification({
                                message: "Choose Next Processor or Request Status",
                                type: "error",
                                autoClose: true,
                                duration: 3
                            });
                        }
                    }else{
                        showNotification({
                            message: "Please Add Button",
                            type: "error",
                            autoClose: true,
                            duration: 3
                        });
                    }
                }else{
                    showNotification({
                        message: "Choose Processor type or Action Status",
                        type: "error",
                        autoClose: true,
                        duration: 3
                    });
                }  
            }else{
                //change the value of the node
                arrayNodeID = node_id.split("_");
                if($(".approverWorkflow :selected").val()!=0){
                    $("#"+node_id).attr("approver-type",approverTypeWorkflow);
                    $("#spanText_"+arrayNodeID[1]).text(value);
                }else{
                    //error approver type
                }
                
                $("#spanStatus_"+arrayNodeID[1]).text(status);
                
                buttonApproverErrorChange = 0;
                buttonCtrChange = 0;
                buttonPropertiesChange = "";
                $(".buttonApprover").each(function(){
                    buttonIDChange = this.id.substr(15,this.id.length);
                    if($(this).val()==0 || $(".requestStatus_"+buttonIDChange).val()==""){
                    }else{
                        buttonApproverErrorChange++
                        requestStatusChange = $(".requestStatus_"+buttonIDChange).val();
                        nextApproverChange = $("."+this.id+" :selected").val();
                        buttonPropertiesChange+=buttonIDChange+":"+nextApproverChange+">"+requestStatusChange+"+";
                    }
                    buttonCtrChange++;
                })
                if(buttonCtrChange>0){
                    if(buttonApproverErrorChange>0){
                        //alert(buttonPropertiesChange)
                        $("#"+node_id).attr("button-status",buttonPropertiesChange);
                    }else{
                        showNotification({
                            message: "Choose Next Processor or Request Status",
                            type: "error",
                            autoClose: true,
                            duration: 3
                        });
                    }
                }else{
                    showNotification({
                        message: "Please Add Button",
                        type: "error",
                        autoClose: true,
                        duration: 3
                    });
                }
                //done
                showNotification({
                    message: "Node Updated",
                    type: "success",
                    autoClose: true,
                    duration: 3
                });
            }
            
        }else if(diagramType=="endOfDiagram"){
            ctrForEnd = 0;
            $(".appendShapes").each(function(){
                if($(this).attr("node-type")=="end"){
                    ctrForEnd++;
                }
            })
            if(ctrForEnd>0){
                showNotification({
                    message: "This action is only allowed once",
                    type: "error",
                    autoClose: true,
                    duration: 3
                });
            }else{
                $(".flow_content").append('<span class="appendShapes workflowObjects  appendObjects newObj" style="" rel="notAllowed" node-type="end" id="flowspan_'+workflow_unique_id+'_'+this.id+'">'+
                                      '<span id="spanText_'+workflow_unique_id+'" class="textHandle" style="cursor:pointer;position: absolute;margin: 5px;width: 60px;text-align: center;font-size: large">END</span>'+
                                      '</span>');
                fire_onBeforeOnload(2)
            }
        }else{
            fire_onBeforeOnload(2)
        /*$(".flow_content").append('<div style="float: left;padding: 5px;min-width: 100px;border: 2px solid #3870A8;border-radius:15px;"  class="appendShapes flowChartObject appendObjects" style="" diagram-type="orgchart" node-type="" id="flowspan_'+uniqueid+'_'+this.id+'"">'+
                                    '<center>'+
                                        '<textarea class="textInsert" id="text_'+uniqueid+'" text_id="spanText_'+uniqueid+'" style="display: none;margin: 0px auto;width: 60px;height: 26px;"></textarea>'+
                                    '</center>'+
                                    '<span id="spanText_'+uniqueid+'" class="textHandle" style="font-size: 10px;cursor:pointer;position: absolute;margin: 5px;width: 60px;text-align: center;"></span>'+
                                    '<div id="flow_'+uniqueid+'_'+this.id+'" rel="'+$(this).attr("rel")+'" class="fl_shapes flowChartObject">'+
                                    '</div>'+
                                    '<div class="shapeSideButton_holder flowChartObject">'+
                                        '<div style="margin: 0 auto;margin-top: 20px;border: 1px solid #3870A8;border-radius:10px;height: 10px;width: 10px;background-color: #3870A8;" class="right flowChartObject connector"  id="right_'+uniqueid+"_"+this.id+'"></div>'+
                                    '</div>'+
                                '</div>');
        
        */
        $(".flow_content").append('<span class="appendShapes flowChartObject appendObjects" style="" diagram-type="orgchart" node-type="" id="flowspan_'+uniqueid+'_'+this.id+'"">'+
                                  '<textarea class="textInsert" id="text_'+uniqueid+'" text_id="spanText_'+uniqueid+'" style="position: absolute;width: 60px;height: 26px;margin: 3px;display:none"></textarea>'+
                                  '<span id="spanText_'+uniqueid+'" class="textHandle" style="font-size: 10px;cursor:pointer;position: absolute;margin: 5px;width: 60px;text-align: center;"></span>'+
                                    '<span id="flow_'+uniqueid+'_'+this.id+'" rel="'+$(this).attr("rel")+'" class="fl_shapes flowChartObject"></span>'+
                                    '<span style="position:absolute" class="shapeSideButton_holder flowChartObject">'+
                                        '<span style="" class="right flowChartObject connector"  id="right_'+uniqueid+"_"+this.id+'"></span>'+
                                    '</span>'+
                                  '</span>');
        /*$(".flow_content").append('<span class="appendShapes flowChartObject" style="z-index:10;margin-left:10px;left:0px;top:0px;position:absolute;width: 82px;height: 38px;padding:2px" id="flowspan_'+uniqueid+'_'+this.id+'"">'+
                                  '<textarea class="textInsert" id="text_'+uniqueid+'" text_id="spanText_'+uniqueid+'" style="position: absolute;width: 60px;height: 26px;margin: 3px;display:none"></textarea>'+
                                  '<span id="spanText_'+uniqueid+'" class="textHandle" style="cursor:pointer;position: absolute;margin: 5px;width: 60px;text-align: center;"></span>'+
                                    '<img src="/images/flowchart/'+this.id+'.png" id="flow_'+uniqueid+'_'+this.id+'" rel="'+$(this).attr("rel")+'" height="38" width="72" class="fl_shapes flowChartObject" />'+
                                    '<span style="position:absolute" class="shapeSideButton_holder flowChartObject">'+
                                        '<span style="color:red;position:absolute;margin-left:-2px;width:10px;height:10px;padding-left:5px;margin-top:12px;background-color:black" class="right flowChartObject connector" id="right_'+uniqueid+"_"+this.id+'"></span>'+
                                    '</span>'+
                                  '</span>');*/
        }
        //function for move Objects
        moveObjects();
        $(".fl_shapes").css("cursor","pointer");
        $(".connector").draggable({containment:'.flow_content'},{revert: "valid"});
        uniqueid++; //for the uniqeness of the objects and line
        workflow_unique_id++;
    });
    //for connecting the objects
    $(".right").live("mousedown",function(){
        parent_id = $("#"+this.id).parent().parent().attr("id"); //container id of the objects
        diagram_type = $("#"+this.id).parent().parent().attr("diagram-type"); //container id of the objects
        master_id = parent_id.split("_"); //split the id using the delimiter underscore "_"
        master_id = master_id[1]; //get the second element of the array
        parent_left = $("#"+this.id).parent().parent().css("left");
        parent_top = $("#"+this.id).parent().parent().css("top");
        nodeTypeParent = $("#"+this.id).parent().parent().attr("node-type");
        //set the flow_content div to droppable so that when the right side of the object drop to the flow_content. it will back to its original position
        //console.log(1);
        $(".flow_content").droppable();
        //for connecting the objects
        $(".appendShapes").droppable({
            drop: function( event, ui ) {
                $(".appendShapes").each(function(){
                    $(this).css("background-color","white");
                })
                nodeType = $(this).attr("node-type");
                child = this.id //get the id of droppable object
                child_left = $("#"+this.id).css("left"); //get the left 
                child_top = $("#"+this.id).css("top");//get the top
                child_id = this.id.split("_"); //split the id
                child_id = child_id[1]; //get the second array element
                width_y = parseInt(child_left.substr(0,child_left.length-2))-parseInt(parent_left.substr(0,parent_left.length-2)); //subtract the left of parent and child without the px
                height_x = parseInt(child_top.substr(0,child_top.length-2))-parseInt(parent_top.substr(0,parent_top.length-2)); //subtract the top of parent and child without the px
                //alert("PARENT LEFT "+parent_left+"\nPARENT TOP "+parent_top+"\nCHILD LEFT"+child_left+"\nCHILD TOP"+child_top);
                valid = true; //variable to determine if the connection is valid or not
                $(".line").each(function(){
                    parent_attr = $(this).attr("master_id");
                    child_attr = $(this).attr("child_id");
                    //if already connected. DO THIS!
                    if(parent_id==parent_attr && child==child_attr || parent_id==child_attr && child==parent_attr){
                        valid = false
                    }
                    string_url = document.URL;
                    if(string_url.search("forms")>0){
                        if(parent_id==parent_attr){
                            valid = false
                        }
                    }
                    if(child==child_attr){
                        valid = false
                    }
                })
                if(nodeType=="start" || (nodeTypeParent=="start" && nodeType=="end")){
                    valid = false;
                }
                //if ready for connection. DO THIS!
                if(valid==true){
                    arrayParent = parent_id.split("_"); //split the parent id using the delimiter underscore "_"
                    arrayParent = "line_"+arrayParent[1]; //get the second array element of parent then add "line_" prefix
                    arrayChild = this.id.split("_"); //split the parent id using the delimiter underscore "_"
                    arrayChild = "line_"+arrayChild[1]; //get the second array element of child then add "line_" prefix
                    setClass = arrayParent+"-"+arrayChild; //concat the result of arrayChild and arrayParent
                    //if drop to other element or correct connection. DO THIS!
                    if(master_id!=child_id){
                        //if width_y is positive
                        if(width_y.toString().substr(0,1)!="-"){
                            //if height_x is positive
                            if(height_x.toString().substr(0,1)!="-"){
                                //alert("positive left: "+width_y+"\npositive top: "+height_x);
                                width_neg = width_y.toString().substr(1,width_y.length);
                                margin_left_neg = width_y+82;
                                parent_left = parent_left.toString().substr(0,parent_left.length-2);
                                //long
                                parent_top = parent_top.toString().substr(0,parent_top.length-2);
                                setLine(parseInt(parent_left)-41+"px",parseInt(width_y),parseInt(parent_top)+height_x/2+"px",3,parent_id,this.id,"long_"+master_id+"_"+this.id,setClass,"pp",1);
                                //down
                                //setLine(left,width,top,height,master_id,child_id,setid,axis,setClass)
                                setLine(parseInt(parent_left)-41+"px",3,parent_top+"px",height_x/2,parent_id,this.id,"vertFirst_"+master_id+"_"+this.id,setClass,"pp",1);
                                setLine(parseInt(child_left)-41+"px",3,parseInt(parent_top)+height_x/2+"px",height_x/2,parent_id,this.id,"vertSecond_"+master_id+"_"+this.id,setClass,"pp",1);
                                /*left:'+(parseInt(child_left)+41)+"px"+';top:'+parseInt(parent_top)+height_x+'px;
                                *setArrow(left,top,setClass,axis)
                                */
                                setArrow((parseInt(child_left)),parseInt(parent_top)+height_x,setClass,"pp","arrow_"+master_id+"_"+this.id,parent_id,this.id,2)
                                //short
                                //setLine(margin_left_neg,height_x+30,parent_left+"px",12,parent_top,2,parent_id,this.id,"short_"+master_id+"_"+this.id,"pp");
                            //if height_x is positive
                            }else{
                                //alert("positive left: "+width_y+"\nnegative top: "+height_x)
                                //long
                                parent_left = parent_left.toString().substr(0,parent_left.length-2);
                                setLine(parseInt(parent_left)-41+"px",parseInt(width_y)+2,parseInt(parent_top)+height_x/2+"px",3,parent_id,this.id,"long_"+master_id+"_"+this.id,setClass,"pn",1);
                                //up=
                                parent_height = height_x.toString().substr(1,height_x.length);
                                child_top_margin = child_top.toString().substr(0,child_top.length-2);
                                setLine(parseInt(parent_left)-41+"px",3,parseInt(parent_top)+height_x/2+"px",parent_height/2,parent_id,this.id,"vertFirst_"+master_id+"_"+this.id,setClass,"pn",1);
                                setLine(parseInt(child_left)-41+"px",3,parseInt(child_top_margin)+"px",parent_height/2,parent_id,this.id,"vertSecond_"+master_id+"_"+this.id,setClass,"pn",1);
                                setArrow((parseInt(child_left)),parseInt(child_top_margin),setClass,"pn","arrow_"+master_id+"_"+this.id,parent_id,this.id,2)
                                //short
                                //margin_left_neg = width_y+82;
                                //setLine(margin_left_neg,height_x+30,parent_left+"px",12,parent_top,2,parent_id,this.id,"short_"+master_id+"_"+this.id,"pn")
                            }
                        //if width_y is negative
                        }else{
                            //if height_x is positive
                            if(height_x.toString().substr(0,1)!="-"){
                                //alert("negative left: "+width_y+"\npositive top: "+height_x);
                                //alert(margin_left_neg)
                                parent_left = parent_left.toString().substr(0,parent_left.length-2);
                                //short
                                width_neg = width_y.toString().substr(1,width_y.length);
                                margin_left_neg = width_y+82;
                                setLine(parseInt(child_left)-41+"px",parseInt(width_neg)+3,parseInt(parent_top)+height_x/2+"px",3,parent_id,this.id,"long_"+master_id+"_"+this.id,setClass,"np",1);
                                //down
                                setLine(parseInt(parent_left)-41+"px",3,parent_top,height_x/2,parent_id,this.id,"vertFirst_"+master_id+"_"+this.id,setClass,"np",1);
                                setLine(parseInt(child_left)-41+"px",3,parseInt(parent_top)+height_x/2+"px",height_x/2,parent_id,this.id,"vertSecond_"+master_id+"_"+this.id,setClass,"np",1);
                                setArrow((parseInt(child_left)),parseInt(parent_top)+height_x,setClass,"np","arrow_"+master_id+"_"+this.id,parent_id,this.id,2)
                                //long
                                //width_neg = width_y.toString().substr(1,width_y.length);
                                //margin_left_neg = width_y+82;
                                //setLine(margin_left_neg,height_x+30,parent_left+"px",parseInt(width_neg)-39,parent_top,2,parent_id,this.id,"long_"+master_id+"_"+this.id,"np");
                            //if height_x is negative
                            }else{
                                //alert("negative left: "+width_y+"\nnegative top: "+height_x)
                                //short
                                //setLine(margin_left,margin_top,left,width,top,height,master_id,child_id,setid,axis,setClass)
                                margin_left_neg = width_y+82;
                                width_neg = width_y.toString().substr(1,width_y.length);
                                setLine(parseInt(child_left)-41+"px",parseInt(width_neg),parseInt(parent_top)+height_x/2-2+"px",3,parent_id,this.id,"long_"+master_id+"_"+this.id,setClass,"nn",1);
                                //up
                                parent_left = parent_left.toString().substr(0,parent_left.length-2);
                                parent_height = height_x.toString().substr(1,height_x.length);
                                child_top_margin = child_top.toString().substr(0,child_top.length-2);
                                setLine(parseInt(parent_left)-41+"px",3,parseInt(parent_top)+height_x/2-2+"px",parent_height/2,parent_id,this.id,"vertFirst_"+master_id+"_"+this.id,setClass,"nn",1);
                                setLine(parseInt(child_left)-41+"px",3,parseInt(child_top)+"px",parent_height/2,parent_id,this.id,"vertSecond_"+master_id+"_"+this.id,setClass,"nn",1);
                                setArrow((parseInt(child_left)),parseInt(child_top_margin),setClass,"nn","arrow_"+master_id+"_"+this.id,parent_id,this.id,2)
                                //long
                                //width_neg = width_y.toString().substr(1,width_y.length);
                                //margin_left_neg = width_y+82;
                                //setLine(margin_left_neg,height_x+30,parent_left+"px",parseInt(width_neg)+12,parent_top,2,parent_id,this.id,"long_"+master_id+"_"+this.id,"nn");
                            }
                        }
                    //if drop to the same object. DO THIS!
                    }else{
                        //alert("This connection is not allowed")
                    }
                //if already connected. DO THIS!
                }else{
                    alert("This connection is not allowed")
                }
            }
        });
    })
    //variable to determine if mouse enter on the textarea
    textMouse_out = 0;
    //if mouse enter to textarea. replace the value of textMouse_out to 1
    $(".textInsert").live("mouseenter",function(){
        textMouse_out = 1;
        //alert(textMouse_out)
    })
    //if mouse out to textarea. replace the value of textMouse_out to 0
    $(".textInsert").live("mouseout",function(){
        textMouse_out = 0;
        //alert(textMouse_out)
    })
    //variable to determine if mouse enter on the textarea
    objMouse_out = 0;
    //if mouse enter to textarea. replace the value of textMouse_out to 1
    $(".appendShapes").live("mouseenter",function(){
        objMouse_out = 1;
        //alert(textMouse_out)
    })
    //if mouse out to textarea. replace the value of textMouse_out to 0
    $(".appendShapes").live("mouseout",function(){
        objMouse_out = 0;
        //alert(textMouse_out)
    })
    //if mouse out to line. replace the value of objMouseLine to 0
    objMouseLine = 0;
    $(".line").live("mouseenter",function(){
        objMouseLine = 1;
        //alert(textMouse_out)
    })
    //if mouse out to line. replace the value of objMouseLine to 0
    $(".line").live("mouseout",function(){
        objMouseLine = 0;
        //alert(textMouse_out)
    })
    //activate object
    oldCountAcitvate = 0;
    appendOptionClick = "";
    $(".appendShapes").live("click",function(){
        
        rel = $(this).attr("rel");
        id = this.id
        objMouse_out = 1;
        if(rel=="notAllowed"){
            showNotification({
                message: "You Cannot activate this object!",
                type: "warning",
                autoClose: true,
                duration: 3
            });
        }else{
            $(".appendShapes").each(function(){
                if(this.id == id){
                    //$("#"+$("#"+id).children().next().attr("id")).hide()
                    $("#"+id).addClass("activeObj");
                    $("#"+id).css("border","3px dotted red");
                    //$("#"+$("#"+id).children().next().attr("id")).text("12")
                    
                    //FOR WORKFLOW ONLY
                    string_url = document.URL;
                    if(string_url.search("forms")>0){
                        approverType = $("#"+id).attr("approver-type")
                        approver = $("#"+id+" :eq(0)").text();
                        approverStatus = $("#"+id+" :eq(1)").next().text();
                        //$(".approverTypeWorkflow option:selected").val(approverType);
                        $(".approverTypeWorkflow").find("option[value="+approverType+"]").attr("selected","selected")
                        $.post("/ajax/actionAdmin",{action:"getApproverWorflow",value:approverType},function(data){
                            $(".approverWorkflow").html(data);
                            $(".approverWorkflow option").each(function(){
                                if($(this).text()==approver){
                                    $(this).attr("selected","selected")
                                }else{
                                    $(this).attr("selected",false)
                                }
                            })
                            $(".approverWorkflowStatus option").each(function(){
                                if($(this).text()==approverStatus){
                                    $(this).attr("selected","selected")
                                }else{
                                    $(this).attr("selected",false)
                                }
                            })
                        })
                        //for buttons selection
                        objectID = [];
                        $(".pureLine").each(function(){
                            child_attr = $(this).attr("child_id");
                            objectID.push(child_attr)
                        })
                        //definite na apat na pareho ung lines
                        if(oldCountAcitvate!=objectID.length){
                            $(".buttonApprover_"+masterApprovalValue).html(null)
                            appendOptionClick = "";
                            for(b=0;b<objectID.length;b+=3){
                                if(objectID[b].search("endOfDiagram")>0){
                                    
                                }else{
                                    appendOptionClick+=objectID[b]+",";
                                }
                            }
                        }
                        oldCountAcitvate = objectID.length
                        buttonProperties = $("#"+id).attr("button-status");
                        
                        $.post("/ajax/actionAdmin",{action:"getButtonChoices",buttonProperties:buttonProperties},function(setButton){
                            $(".approverButtons").html(setButton);
                            //alert(setButton)
                        })
                        //for button properties
                        $.post("/ajax/actionAdmin",{action:"getButtonProperties",buttonProperties:buttonProperties,appendOption:appendOptionClick},function(setButtonProperties){
                            $(".appendButtonsToUse").html(setButtonProperties);
                            //alert(setButtonProperties)
                        })
                    }
                    //end of workflow
                    
                    
                }else{
                    $("#"+$("#"+this.id).children().next().attr("id")).show()
                    $("#"+this.id).removeClass("activeObj");
                    $("#"+this.id).css("border","1px solid rgb(194, 194, 194)")
                    textToAppend = $("#"+$("#"+this.id).children().attr("id")).val()
                    textParent = $("#"+this.id).children().next().attr("id");
                    $("#"+textParent).text(textToAppend)
                }
            })
        }
    })
    //click to the whole body of html
    $(".flow_content").live("click",function(){
        //if mouse out to text area. DO THIS!
        if(textMouse_out==0){
            //get all the textarea
            $(".textInsert").each(function(){
                $("#"+this.id).hide(); //hide all textarea
                textToAppend = $("#"+this.id).val(); //get the value of textarea
                textParent = $("#"+this.id).attr("text_id"); //get the parent of textarea
                //$("#"+textParent).text(textToAppend) //replace the value of textparent into the value of textarea
                //$("#"+textParent).css("display","inline-block") //show the span parent
            })
        }
        if(objMouse_out==0){
            $(".appendShapes").each(function(){
                $("#"+this.id).removeClass("activeObj");
                $("#"+this.id).css("border","1px solid rgb(194, 194, 194)")
                textToAppend = $("#"+$("#"+this.id).children().attr("id")).val()
                textParent = $("#"+this.id).children().next().attr("id");
                $("#"+textParent).text(textToAppend)
                $("#"+textParent).show();
            })
            
            //return the worflow setting to the default state
            $(".approverTypeWorkflow").find("option[value=0]").attr("selected","selected")
            $.post("/ajax/actionAdmin",{action:"getApproverWorflow",value:0},function(data){
                $(".approverWorkflow").html(data);
                $(".approverWorkflowStatus option").each(function(){
                    if($(this).val()==0){
                        $(this).attr("selected","selected")
                    }else{
                        $(this).attr("selected",false)
                    }
                })
            })
            //set button to the default state
            $.post("/ajax/actionAdmin",{action:"getDefaultButton"},function(setButton){
                $(".approverButtons").html(setButton);
                //alert(data)
            })
            //set button properties to null
            $(".appendButtonsToUse").html(null);
        }
        if(objMouseLine==0){
            $(".line").each(function(){
                $("#"+this.id).removeClass("activeObj");
                $(this).css("background-color","background-color:rgb(56, 112, 168)")
                $(this).css("z-index","1")
            })
        }
    })
    //double click the object
    $(".appendShapes").live("dblclick",function(){
        text_id = $("#"+this.id).eq(0).attr("id"); // get the child id of the object
        text_id = text_id.split("_");
        $("#text_"+text_id[1]).css("display","block").focus() //show the textarea
        textParent = $("#text_"+text_id[1]).attr("text_id") //get the id of text holder or the span element
        $("#"+textParent).css("display","none") //hide the text holder
    })
    //delete connection
    //line_zeyIndex = 1;
    $(".line").live("click",function(){
        /*if($(this).attr("rel")!="notAllowed"){
            classToExplode = $(this).attr("class");
            classToExplode = classToExplode.split(" ");
            getClass = classToExplode[1];
            conf = confirm("Do you want to delete connection?");
            if(conf){
                $("."+getClass).each(function(){
                    $(this).remove();
                })   
            }
        }*/
        if($(this).attr("rel")!="notAllowed"){
            classToExplode = $(this).attr("class");
            classToExplode = classToExplode.split(" ");
            getClass = classToExplode[1];
            $(".line").each(function(){
                classToExplode2 = $(this).attr("class");
                classToExplode2 = classToExplode2.split(" ");
                getClass2 = classToExplode2[1];
                if(getClass2==getClass){
                    $("."+getClass).each(function(){
                        $(this).addClass("activeObj");
                        $(this).css("background-color","red")
                        $(this).css("z-index",2)
                    })
                }else{
                    $("."+getClass2).each(function(){
                        $(this).removeClass("activeObj");
                        $(this).css("background-color","rgb(56, 112, 168)")
                        $(this).css("z-index","1")
                    }) 
                }
            });
        }
    })
    $(".flowChartObject").live("mouseenter",function(){
        //
    })
    $(".flowChartObject").live("mouseout",function(){
        //alert("labas")
    })
    //SaveDiagram from modal
    $(".saveDiagram").live("click",function(){
        //for objects
        object_id = [];
        object_tops = [];
        object_lefts = [];
        object_role = [];
        $(".appendShapes").each(function(){
            object_id.push($(this).attr("id"));
            object_tops.push($(this).css("top"));
            object_lefts.push($(this).css("left"));
            textId = $(this).attr("id").split("_");
            object_role.push($("#text_"+textId[1]).val());
        })
        //for lines
        line_id = [];
        master_id = [];
        child_id = [];
        line_tops = [];
        line_lefts = [];
        line_heights = [];
        line_widths = [];
        line_margin_lefts = [];
        line_margin_tops = [];
        line_axis = [];
        line_type = [];
        $(".line").each(function(){
            line_id.push($(this).attr("id"));
            master_id.push($(this).attr("master_id"));
            child_id.push($(this).attr("child_id"));
            line_tops.push($(this).css("top"));
            line_lefts.push($(this).css("left"));
            line_heights.push($(this).css("height"));
            line_widths.push($(this).css("width"));
            line_margin_tops.push($(this).css("margin-top"));
            line_margin_lefts.push($(this).css("margin-left"));
            line_axis.push($(this).attr("axis"));
            line_type.push($(this).attr("line-type"));
        })
        //other details
        orgChart_title = $("#org_title").val();
        orgChart_rfr = $("#org_rfr").val(); // reason for revision
        chartStatus = $("#chartStatus").val();
        if(orgChart_title != "" && orgChart_rfr != ""){
            $.post("/ajax/saveDiagram",{action:"saveChart",
                                    "object_id[]":[object_id],
                                    "object_tops[]":[object_tops],
                                    "object_lefts[]":[object_lefts],
                                    "object_role[]":[object_role],
                                    "line_id[]":[line_id],
                                    "master_id[]":[master_id],
                                    "child_id[]":[child_id],
                                    "line_tops[]":[line_tops],
                                    "line_lefts[]":[line_lefts],
                                    "line_heights[]":[line_heights],
                                    "line_widths[]":[line_widths],
                                    "line_margin_lefts[]":[line_margin_lefts],
                                    "line_margin_tops[]":[line_margin_tops],
                                    "line_axis[]":[line_axis],
                                    "line_type[]":[line_type],
                                    orgChart_title:orgChart_title,
                                    orgChart_rfr:orgChart_rfr,
                                    chartStatus:chartStatus
                                    },function(data){
                                        //Admin want to delete node but has a pending request
                                        //alert(data)
                                        if(data=="error"){
                                            showNotification({
                                                message: "Error on your Organizational Chart",
                                                type: "error",
                                                autoClose: true,
                                                duration: 5
                                            });
                                        }else if(data=="<+>"){
                                            showNotification({
                                                message: "The role that you delete has a pending request to review. Thanks",
                                                type: "error",
                                                autoClose: true,
                                                duration: 5
                                            });
                                        }else if(data=="<->"){
                                            showNotification({
                                                message: "No Update Found",
                                                type: "warning",
                                                autoClose: true,
                                                duration: 5
                                            });
                                        }else if(data=="Update Done"){
                                            fire_onBeforeOnload(1)
                                            showNotification({
                                                message: "Your Chart was successfully saved.",
                                                type: "success",
                                                autoClose: true,
                                                duration: 5
                                            });
                                            $("html").append('<meta http-equiv="refresh" content="2">'); //for refresh
                                            $('#chartDetails').modal('hide')
                                        }else{
                                            //alert(data)    
                                        }
                                            
            });
        }else{
            showNotification({
                message: "Fill out all the fields.",
                type: "error",
                autoClose: true,
                duration: 3
            });
        }
    })
    //warning for active choice
    $(".chartStatus").live("change",function(){
        if($(this).val()==1){
            $.post("/ajax/checkrow",{action:"countOrgchart"},function(data){
                if(data>0){
                    showNotification({
                        message: "All your previous chart will be deactivated",
                        type: "warning",
                        autoClose: true,
                        duration: 3
                    });
                }
            })
        }
    })
    //Action
    $(".actionBtn").live("click",function(){
        action = $(this).attr("rel");
        if(action == "save"){
            count = 0;
            $(".appendShapes").each(function(){
                count++;
            })
            $("#modalBox").html(null)
            if(count>0){
                $.post("/ajax/saveDiagram",{action:"countRecord"},function(countOrgChart){
                    rfr = "";
                    if(countOrgChart==0){
                        //first time to have org chart. That means the reason for revision will not show
                        rfr = "<textarea id='org_rfr' readonly='readonly'>New Diagram</textarea>";
                    }else{
                        rfr = "<textarea id='org_rfr'></textarea>";
                    }
                    
                    $("#modalBox").html("<div class='fields'>"+
                                                "<div class='label fontGray' id='labelObject'>Diagram Name:</div>"+
                                               "<div class='input_position'>"+
                                                    "<input type='text' class='input-x-medium' id='org_title' style='width:170px;'>"+
                                                "</div>"+
                                            "</div>"+
                                            "<div class='fields'>"+
                                                "<div class='label fontGray' id='labelObject'>Status:</div>"+
                                                "<div class='input_position'>"+
                                                    "<select class='select large chartStatus input-x-medium' id='chartStatus'>"+
                                                        "<option value='0'>Deactivated</option>"+
                                                        "<option value='1'>Activated</option>"+
                                                    "</select>"+
                                                "</div>"+
                                            "</div>"+
                                            "<div class='fields btnForDiagram'>"+
                                                "<div class='label fontGray' id='labelObject'></div>"+
                                               "<div class='input_position' style='margin-top:5px; border-bottom: none;'>"+
                                                    "<button class='button-normal closeDiagram' data-dismiss='modal' aria-hidden='true'>Close</button>"+
                                                    "&nbsp;&nbsp;<button class='button-normal saveDiagram'>Save changes</button>"+
                                                "</div>"+
                                            "</div>").css({"left": "50%",
                                                          "margin-left": "-220px",
                                                          "top": "100px",
                                                          "height": "100px",
                                                            "width": "370px"});
                })
                $(".btnForDiagram").show() //BUTTON
            }else{
                $("#modalBox").html("<label>Create your own chart before you proceed to save it.</label>").css({"left": "50%",
                                                          "margin-left": "-220px",
                                                          "top": "100px",
                                                          "height": "20px",
                                                            "width": "370px"});
                //$(".saveDiagram").hide(); $(".closeDiagram").hide();//BUTTON
                $(".btnForDiagram").hide();
            }
        }else if(action == "print"){
            alert("Print!");
        }else if(action == "zIn"){
            alert("Zoom In!");
        }else if(action == "zOut"){
            alert("Zoom Out!");
        }else if(action == "cancel"){
            //alert("Cancel!");
            $.post("/ajax/viewDiagram",{action:"viewActiveDiagram"},function(data){
                $(".flow_content").html(data);
                moveObjects();
                $(".connector").draggable({containment:'.flow_content'},{revert: "valid"});
            })
            $.post("/ajax/viewDiagram",{action:"getActiveDiagram"},function(data){
                active_id = data;
                $(".diagram_rows").each(function(){
                    if(this.id=="tr_"+active_id){
                        $("#tr_"+active_id).addClass("activeDiagram")
                    }else{
                        $("#"+this.id).removeClass("activeDiagram")
                    }
                })
            })
        }else if(action == "delete"){
            count = 0;
            $(".activeObj").each(function(){
                count++;
            })
            if(count>0){
                conf = confirm("Do you want to delete this object?");
                if(conf){
                    object_id = $(".activeObj").attr("id");
                    $(".line").each(function(){
                        master_attr = $(this).attr("master_id");
                        child_attr = $(this).attr("child_id");
                        if(master_attr==object_id || child_attr==object_id){
                            $("#"+this.id).remove()
                        }
                    })
                    $(".activeObj").remove();
                }
            }else{
                showNotification({
                    message: "Click the shape to activate.Then press delete",
                    type: "error",
                    autoClose: true,
                    duration: 3
                });
            }
        }else if(action=="newDiagram"){
            //$(".flow_content").html(null);
            ctr = 0;
            $(".line").each(function(){
                ctr++;
            })
            $(".flowChartObject").each(function(){
                ctr++;
            })
            if(ctr>0){
                conf = confirm("Are you sure to create new Organizational Chart?");
                if(conf){
                    $(".line").each(function(){
                        $(this).remove();
                        ctr++;
                    })
                    $(".flowChartObject").each(function(){
                        $(this).remove();
                        ctr++;
                    })
                    $(".diagram_rows").each(function(){
                        $("#"+this.id).removeClass("activeDiagram");
                    })
                    uniqueid = 1;
                    workflow_unique_id = 2;    
                }
            }
        }
    })
    //tooltip
    $('.actionBtn').tooltip()
    $('.diagram_rows').tooltip()
    //activate Diagram
    $(".activate_diagram").live("click",function(){
        diagram_id = this.id;
        conf = confirm("Warning,\n\nActive diagram will be deactivated");
        if(conf){
            $.post("/ajax/viewDiagram",{diagram_id:diagram_id,action:"activateDiagram"},function(data){
                //alert(data)
                if(data=="<+>"){
                    showNotification({
                        message: "The role that you delete has a pending request to review. Thanks",
                        type: "error",
                        autoClose: true,
                        duration: 5
                    });
                }else if(data=="Update Done"){
                    showNotification({
                        message: "Update of Orgchart Done",
                        type: "success",
                        autoClose: true,
                        duration: 5
                    });
                    $("html").append('<meta http-equiv="refresh" content="2">'); //for refresh
                    $('#chartDetails').modal('hide')
                }else if(data=="<request>"){
                    showNotification({
                        message: "Update of Orgchart Done, Some request will be reset",
                        type: "success",
                        autoClose: true,
                        duration: 7
                    });
                    $("html").append('<meta http-equiv="refresh" content="2">'); //for refresh
                }else{
                    //alert(data)    
                }
            })
            //$("html").append('<meta http-equiv="refresh" content="2">'); //for refresh
        }
    })
    //delete diagram
    $(".delete_diagram").live("click",function(){
        diagram_id = this.id;
        $.post("/ajax/viewDiagram",{diagram_id:diagram_id,action:"deleteDiagram"},function(data){
            alert(data)
        })
    })
    $(".deact_diagram").live("click",function(){
        alert("Action is under development");
    })
    //
    $(".diagram_rows").live("click",function(){
        diagram_id = $(this).attr("rel");
        $.post("/ajax/viewDiagram",{diagram_id:diagram_id,action:"viewDiagram"},function(data){
            $(".flow_content").html(data);
            moveObjects();
            $(".connector").draggable({containment:'.flow_content'},{revert: "valid"});
        })
        tr_id = $(this).attr("id");
        $(".diagram_rows").each(function(){
            if(this.id==tr_id){
                $("#"+tr_id).addClass("activeDiagram")
            }else{
                $("#"+this.id).removeClass("activeDiagram")
            }
        })
    })
    //add button per workflow object
    oldCountAdd = 0;
    appendOption = "";
    $(".addButton").live("click",function(){
        approverButton = $(".approverButtons option:selected").attr("id");
        approverButtonVal = $(".approverButtons option:selected").val();
        approverButtonText = $(".approverButtons option:selected").text();
        objectID = [];
        $(".pureLine").each(function(){
            child_attr = $(this).attr("child_id");
            objectID.push(child_attr)
        })
        //definite na apat na pareho ung lines
        if(oldCountAdd!=objectID.length){
            $(".buttonApprover_"+approverButtonVal).html(null)
            appendOption = "";
            for(b=0;b<objectID.length;b+=3){
                if(objectID[b].search("endOfDiagram")>0){
                    
                }else{
                    appendOption+="<option value='"+objectID[b]+"'>"+objectID[b]+"</option>";
                }
            }
        }
        oldCountAdd = objectID.length
        if(approverButtonVal!=0){
            //alert(approverButton)
            $("#"+approverButton).remove();
            $(".appendButtonsToUse").append('<div class="approverButtonBlock" id="approverButtonBlock_'+approverButtonVal+'"><span class="fontGray" style="float:left;margin-left:5px;margin-top:10px;font-weight: bold;">'+approverButtonText+'</span><span class="pull-right deleteApproverButton" id="deleteApproverButton'+approverButton+'" style="margin-right:5px;margin-top:10px;cursor:pointer"><li class="icon-remove"></li></span>'+
                                                '<div class="fields">'+
                                                    '<div class="label fontGray" id="labelObject">Next Processor:</div>'+
                                                    
                                                    '<div class="input_position" style="margin-top:5px; border-bottom: none;">'+
                                                        '<select class="input-x-medium buttonApprover buttonApprover_'+approverButtonVal+'" id="buttonApprover_'+approverButtonVal+'">'+
                                                        '<option value="0">--Select--</option><option value="1">Back to Requestor</option><option value="3">Next Processor</option>'+appendOption+'<option value="2">Approved</option></select>'+
                                                    '</div>'+
                                                '</div>'+
                                                
                                                '<div class="fields requestStatusLabel_'+approverButtonVal+' display">'+
                                                    '<div class="label fontGray" id="labelObject" >Request Status:</div>'+
                                                        '<div  class="input_position" style="margin-top:5px; border-bottom: none;">'+
                                                            '<select class="input-x-medium requestStatus requestStatus_'+approverButtonVal+'" id="requestStatus_'+approverButtonVal+'">'+
                                                            '<option value="2">Reject</option>'+
                                                            '<option value="4">Draft</option>'+
                                                        '</div>'+
                                                '</div></div>');
        }else{
            showNotification({
                message: "Please choose button",
                type: "error",
                autoClose: true,
                duration: 5
            });
        }
    })
    //delete button per workflow object
    $(".deleteApproverButton").live("click",function(){
        buttonText = $("#"+this.id).prev().text();
        buttonID = this.id.substr(parseInt(this.id.length)-1,this.id.length);
        //alert(buttonID)
        $(".approverButtons").append("<option value='"+buttonID+"' id='approverButton_"+buttonID+"'>"+buttonText+"</option>")
        $("#approverButtonBlock_"+buttonID).remove();
    })
    //choosing the next approver
    oldCount = 0;
    oldID = 0;
    masterApprovalValue = "";
    $(".buttonApprover").live("mousedown",function(){
        masterApprovalValue = this.id.substr(parseInt(this.id.length)-1,this.id.length);
        objectID = [];
        $(".pureLine").each(function(){
            child_attr = $(this).attr("child_id");
            objectID.push(child_attr)
        })
        //definite na apat na pareho ung lines
        if(oldCount!=objectID.length || oldID!=masterApprovalValue){
            $(".buttonApprover_"+masterApprovalValue).html(null)
            appendOption = "";
            for(b=0;b<objectID.length;b+=3){
                if(objectID[b].search("endOfDiagram")>0){
                    
                }else{
                    appendOption+="<option value='"+objectID[b]+"'>"+objectID[b]+"</option>";
                }
            }
            $(".buttonApprover_"+masterApprovalValue).html("<option value='0'>--Select--</option><option value='1'>Back to Requestor</option><option value='3'>Next Processor</option>"+appendOption+"<option value='2'>Approved</option>")
        }
        oldCount = objectID.length
        oldID = masterApprovalValue;
    })
    
    //to highlight the approver in workflows
    $(".buttonApprover").live("change",function(){
        button_id = this.id.substr(15,this.id.length);
        if($(this).val()!=0){
            if($(this).val()==1){
                $(".appendShapes").each(function(){
                    if(this.id=="flowspan_1_worklow"){
                        $("#"+this.id).css("border","3px dotted #3870a8");
                    }else{
                        if($("#"+this.id).hasClass("activeObj")){
                            $("#"+this.id).css("border","3px dotted red");
                        }else{
                            $("#"+this.id).css("border","1px solid rgb(194, 194, 194)")    
                        }
                    }
                })
                $(".requestStatusLabel_"+button_id).show();
                //$(".requestStatus_"+button_id).show();
            }else if($(this).val()==2){
                $(".appendShapes").each(function(){
                    if(this.id.search("endOfDiagram")>0){
                        $("#"+this.id).css("border","3px dotted #3870a8");
                    }else{
                        if($("#"+this.id).hasClass("activeObj")){
                            $("#"+this.id).css("border","3px dotted red");
                        }else{
                            $("#"+this.id).css("border","1px solid rgb(194, 194, 194)")    
                        }
                    }
                })
                $(".requestStatusLabel_"+button_id).hide();
            }else{
                value = $(this).val();
                $(".appendShapes").each(function(){
                    if(this.id==value){
                        $("#"+this.id).css("border","3px dotted #3870a8");
                    }else{
                        if($("#"+this.id).hasClass("activeObj")){
                            $("#"+this.id).css("border","3px dotted red");
                        }else{
                            $("#"+this.id).css("border","1px solid rgb(194, 194, 194)")    
                        }
                    }
                })
                $(".requestStatusLabel_"+button_id).hide();
                //$(".requestStatus_"+button_id).hide();
            }
        }else{
            //error
            $(".appendShapes").each(function(){
                $(this).css("border","1px solid rgb(194, 194, 194)")
            })
        }
    })
    
})
//function for appending the connection line
function setLine(left,width,top,height,master_id,child_id,setid,setClass,axis,line_type){
    //alert(margin_left+" "+margin_top+" "+left+" "+width+" "+top+" "+height)
    $(".flow_content").append("<span axis="+axis+" class='line "+setClass+" pureLine' line-type='"+line_type+"' id='"+setid+"' master_id='"+master_id+"' child_id='"+child_id+"' "+
                                "style='margin-left:82px;left:"+left+";width:"+width+"px;margin-top:30px;top:"+top+";"+
                                "position:absolute;height:"+height+"px;background-color:rgb(56, 112, 168);'></span>")
}
function setArrow(left,top,setClass,axis,setid,master_id,child_id,line_type){
    if(axis=="pp" || axis=="np"){
       $(".flow_content").append('<div axis="'+axis+'" class="line '+setClass+'" line-type="'+line_type+'" id="'+setid+'" style="position:absolute;left:'+(left+36)+'px;top:'+top+'px;background-color:rgb(56, 112, 168);" master_id="'+master_id+'" child_id="'+child_id+'">'+
                                '<div style="position:absolute;left:0px;top:0px;margin-top:-5px;width:13px;height:1px;clip:rect(0,11px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:1px;top:0px;margin-top:-4px;width:11px;height:1px;clip:rect(0,9px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:2px;top:0px;margin-top:-3px;width:9px;height:1px;clip:rect(0,7px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:3px;top:0px;margin-top:-2px;width:7px;height:1px;clip:rect(0,5px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:4px;top:0px;margin-top:-1px;width:5px;height:1px;clip:rect(0,3px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:5px;top:0px;margin-top:0px;width:3px;height:1px;clip:rect(0,1px,1px,0);background: inherit;overflow:hidden;"></div>'+
                              '</div>');    
    }else if(axis=="pn" || axis == "nn"){
        $(".flow_content").append('<div axis="'+axis+'" class="line '+setClass+'" line-type="'+line_type+'" id="'+setid+'" style="position:absolute;left:'+(left+36)+'px;top:'+top+'px;background-color:black" master_id="'+master_id+'" child_id="'+child_id+'">'+
                                '<div style="position:absolute;left:0px;top:0px;margin-top:62px;width:13px;height:1px;clip:rect(0,11px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:1px;top:0px;margin-top:61px;width:11px;height:1px;clip:rect(0,9px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:2px;top:0px;margin-top:60px;width:9px;height:1px;clip:rect(0,7px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:3px;top:0px;margin-top:59px;width:7px;height:1px;clip:rect(0,5px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:4px;top:0px;margin-top:58px;width:5px;height:1px;clip:rect(0,3px,1px,0);background: inherit;overflow:hidden;"></div>'+
                                '<div style="position:absolute;left:5px;top:0px;margin-top:57px;width:3px;height:1px;clip:rect(0,1px,1px,0);background: inherit;overflow:hidden;"></div>'+
                              '</div>');    
    }
}
function moveObjects(){
    //$(".appendShapes").resizable();
    $(".appendShapes").draggable(
    {
        //strictly dragging on flow_content only
        containment:'.flow_content',
    },
    {
        drag:function(){
            //get the id of the dragging object
            parent_id = this.id;
            //fetch all the lines that we did on the drop functions
            $(".line").each(function(){
                //variables
                master_attr = $(this).attr("master_id");//parent object 
                child_attr = $(this).attr("child_id"); // child object
                line_id = this.id; //line id
                line_segment = line_id.split("_"); // split the line id into two with the delimiter of underscore "_"
                line_first_segment = line_segment[0]; //get the first segment
                int_master_left = $("#"+master_attr).css("left").substr(0,$("#"+master_attr).css("left").length-2) //get the left of the PARENT object without "px" at the end to be ready on math computation later
                int_master_top = $("#"+master_attr).css("top").substr(0,$("#"+master_attr).css("top").length-2) //get the top of the PARENT object without "px" at the end to be ready on math computation later
                int_child_left = $("#"+child_attr).css("left").substr(0,$("#"+child_attr).css("left").length-2) //get the left of the CHILD object without "px" at the end to be ready on math computation later
                int_child_top = $("#"+child_attr).css("top").substr(0,$("#"+child_attr).css("top").length-2) //get the left of the CHILD object without "px" at the end to be ready on math computation later
                width_long = parseInt(int_child_left)-parseInt(int_master_left);
                height_verts = (parseInt(int_child_top)-parseInt(int_master_top))/2;
                if($(this).attr("axis")=="pp" || $(this).attr("axis") == "np"){
                    if(parent_id==master_attr){
                        //condition of line_first_segment
                        if(line_first_segment=="long"){
                            if(((parseInt(int_child_top)-parseInt(int_master_top))/2)<35){
                                if((parseInt(int_child_top)-parseInt(int_master_top)+12)<12){
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                }else{
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                    $("#"+line_id).css("margin-top","-17px");
                                }
                            }else{
                                $("#"+line_id).css("margin-top","30px");
                                $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                            }
                            if(width_long.toString().substr(0,1)=="-"){
                                $("#"+line_id).css("width",parseInt(width_long.toString().substr(1,width_long.length))+3);
                                $("#"+line_id).css("left",parseInt(int_child_left)-41+"px");
                            }else{
                                $("#"+line_id).css("width",parseInt(width_long)+1);
                                $("#"+line_id).css("left",parseInt(int_master_left)-41+"px");
                            }
                        }else if(line_first_segment == "vertFirst"){
                            if(((parseInt(int_child_top)-parseInt(int_master_top))/2)<35){
                                if((parseInt(int_child_top)-parseInt(int_master_top)+12)<12){
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                    $("#"+line_id).css("height",parseInt(((parseInt(int_child_top)-parseInt(int_master_top))).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))).length))+17+"px");
                                }else{
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                    $("#"+line_id).css("margin-top","-17px");
                                }
                            }else{
                                $("#"+line_id).css("margin-top","30px");
                                if(height_verts.toString().substr(0,1)=="-"){
                                    $("#"+line_id).css("height",((parseInt(int_child_top)-parseInt(int_master_top))/2).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))/2).length)+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                }
                            }
                            $("#"+line_id).css("left",parseInt(int_master_left)-41+"px");
                        }else if(line_first_segment == "vertSecond"){
                            if(((parseInt(int_child_top)-parseInt(int_master_top))/2)<35){
                                if((parseInt(int_child_top)-parseInt(int_master_top)+12)<12){
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                }else{
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top)+12)+"px");
                                    $("#"+line_id).css("margin-top","-17px");
                                }
                            }else{
                                $("#"+line_id).css("margin-top","30px");
                                if(height_verts.toString().substr(0,1)=="-"){
                                    $("#"+line_id).css("height",((parseInt(int_child_top)-parseInt(int_master_top))/2).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))/2).length)+"px");
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                }
                            }
                        }
                    //if parent id or the one that we drag is equal to the master attribute of the line. DO THIS!
                    }else if(parent_id==child_attr){
                        //condition of line_first_segment
                        if(line_first_segment=="long"){
                            if(((parseInt(int_child_top)-parseInt(int_master_top))/2)<35){
                                if((parseInt(int_child_top)-parseInt(int_master_top)+12)<12){
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                }else{
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                    $("#"+line_id).css("margin-top","-17px");
                                }
                            }else{
                                $("#"+line_id).css("margin-top","30px");
                                $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                            }
                            if(width_long.toString().substr(0,1)=="-"){
                                $("#"+line_id).css("width",parseInt(width_long.toString().substr(1,width_long.length))+2);
                                $("#"+line_id).css("left",parseInt(int_child_left)-40+"px");
                            }else{
                                $("#"+line_id).css("width",parseInt(width_long)+3);
                                $("#"+line_id).css("left",parseInt(int_master_left)-41+"px");
                            }
                        }else if(line_first_segment == "vertFirst"){
                            if(((parseInt(int_child_top)-parseInt(int_master_top))/2)<35){
                                if((parseInt(int_child_top)-parseInt(int_master_top)+12)<12){
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                    $("#"+line_id).css("height",parseInt(((parseInt(int_child_top)-parseInt(int_master_top))).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))).length))+17+"px");
                                }else{
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                    $("#"+line_id).css("margin-top","-17px");
                                }
                            }else{
                                $("#"+line_id).css("margin-top","30px");
                                if(height_verts.toString().substr(0,1)=="-"){
                                    $("#"+line_id).css("height",((parseInt(int_child_top)-parseInt(int_master_top))/2).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))/2).length)+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                }
                            }
                        }else if(line_first_segment == "vertSecond"){
                            $("#"+line_id).css("left",parseInt(int_child_left)-41+"px");
                            if(((parseInt(int_child_top)-parseInt(int_master_top))/2)<35){
                                if((parseInt(int_child_top)-parseInt(int_master_top)+12)<12){
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                }else{
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top)+12)+"px");
                                    $("#"+line_id).css("margin-top","-17px");
                                }
                            }else{
                                $("#"+line_id).css("margin-top","30px");
                                $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                            }
                        }else if(line_first_segment == "arrow"){
                            $("#"+line_id).css("left",parseInt(int_child_left)+36+"px");
                            $("#"+line_id).css("top",parseInt(int_child_top));
                        }
                    }
                }else{ //nn pn
                    if(parent_id==master_attr){
                        //condition of line_first_segment
                        if(line_first_segment=="long"){
                            if((parseInt(int_child_top)-parseInt(int_master_top))/2>-35){
                                if((parseInt(int_master_top)-parseInt(int_child_top)+12)<12){
                                    
                                }else{
                                    $("#"+line_id).css("top",(parseInt(int_master_top)+40)+"px");
                                }
                            }else{
                                $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                            }
                            if(width_long.toString().substr(0,1)=="-"){
                                $("#"+line_id).css("width",width_long.toString().substr(1,width_long.length));
                                $("#"+line_id).css("left",parseInt(int_child_left)-41+"px");
                            }else{
                                $("#"+line_id).css("width",width_long);
                                $("#"+line_id).css("left",parseInt(int_master_left)-41+"px");
                            }
                        }else if(line_first_segment == "vertFirst"){
                            $("#"+line_id).css("left",parseInt(int_master_left)-41+"px");
                            if((parseInt(int_child_top)-parseInt(int_master_top))/2>-35){
                                if((parseInt(int_master_top)-parseInt(int_child_top)+12)<12){
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top)+42)+"px");
                                }else{
                                    $("#"+line_id).css("height","40px");
                                }
                                $("#"+line_id).css("top",(parseInt(int_master_top))+"px");
                            }else{
                                if(height_verts.toString().substr(0,1)=="-"){
                                    $("#"+line_id).css("height",((parseInt(int_child_top)-parseInt(int_master_top))/2).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))/2).length)+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                }
                            }
                        }else if(line_first_segment == "vertSecond"){
                            if((parseInt(int_child_top)-parseInt(int_master_top))/2>-35){
                                if((parseInt(int_master_top)-parseInt(int_child_top)+12)<12){
                                    
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_master_top)-parseInt(int_child_top)+12)+"px");
                                    $("#"+line_id).css("top",parseInt(int_child_top)+30);
                                }
                            }else{
                                if(height_verts.toString().substr(0,1)=="-"){
                                    $("#"+line_id).css("height",((parseInt(int_child_top)-parseInt(int_master_top))/2).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))/2).length)+"px");
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                }
                            }
                        }
                    //if parent id or the one that we drag is equal to the master attribute of the line. DO THIS!
                    }else if(parent_id==child_attr){
                        //condition of line_first_segment
                        if(line_first_segment=="long"){
                            if((parseInt(int_child_top)-parseInt(int_master_top))/2>-35){
                                if((parseInt(int_master_top)-parseInt(int_child_top)+12)<12){
                                    $("#"+line_id).css("top",(parseInt(int_child_top)+40)+"px");
                                }else{
                                    $("#"+line_id).css("top",(parseInt(int_master_top)+40)+"px");
                                }
                            }else{
                                $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                            }
                            if(width_long.toString().substr(0,1)=="-"){
                                $("#"+line_id).css("width",width_long.toString().substr(1,width_long.length));
                                $("#"+line_id).css("left",parseInt(int_child_left)-41+"px");
                            }else{
                                $("#"+line_id).css("width",width_long);
                                $("#"+line_id).css("left",parseInt(int_master_left)-41+"px");
                            }
                        }else if(line_first_segment == "vertFirst"){
                            if((parseInt(int_child_top)-parseInt(int_master_top))/2>-35){
                                if((parseInt(int_master_top)-parseInt(int_child_top)+12)<12){
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top)+42)+"px");
                                }else{
                                    $("#"+line_id).css("height","40px");
                                }
                                $("#"+line_id).css("top",(parseInt(int_master_top))+"px");
                            }else{
                                if(height_verts.toString().substr(0,1)=="-"){
                                    $("#"+line_id).css("height",((parseInt(int_child_top)-parseInt(int_master_top))/2).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))/2).length)+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top));
                                }
                            }
                        }else if(line_first_segment == "vertSecond"){
                            $("#"+line_id).css("left",parseInt(int_child_left)-41+"px");
                            if((parseInt(int_child_top)-parseInt(int_master_top))/2>-35){
                                if((parseInt(int_master_top)-parseInt(int_child_top)+12)<12){
                                    $("#"+line_id).css("top",parseInt(int_child_top)+30);
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_master_top)-parseInt(int_child_top)+12)+"px");
                                    $("#"+line_id).css("top",parseInt(int_child_top)+30);
                                }
                            }else{
                                if(height_verts.toString().substr(0,1)=="-"){
                                    $("#"+line_id).css("height",((parseInt(int_child_top)-parseInt(int_master_top))/2).toString().substr(1,((parseInt(int_child_top)-parseInt(int_master_top))/2).length)+"px");
                                    $("#"+line_id).css("top",parseInt(int_child_top));
                                }else{
                                    $("#"+line_id).css("height",(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                    $("#"+line_id).css("top",parseInt(int_master_top)+(parseInt(int_child_top)-parseInt(int_master_top))/2+"px");
                                }
                            }
                        }else if(line_first_segment == "arrow"){
                            $("#"+line_id).css("left",parseInt(int_child_left)+36+"px");
                            $("#"+line_id).css("top",parseInt(int_child_top));
                        }
                    }
                }
            })
        }
    },
    {
        //strictly dragging on flow_content only
        stop: function(){}
    }
    );
}